<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <script src="../org/jquery.min.js"></script>
    <script src="../org/angular-ui-router.min.js"></script>
</head>

<body>
    <div ng-app="hd">
        <!--  my.html 占位下面空 ui-view
        <a href="" ui-sref="my">我的</a>
        <a href="" ui-sref="my.video">视频</a>
         <div ui-view="son"></div>
     -->
        <div ui-view=""></div>
        <div ui-view="content"></div>
    </div>
    <script>
        var m = angular.module('hd', ['ui.router']);
        m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            //默认路由
            $urlRouterProvider.otherwise('/my');
            //定义路由规则
            $stateProvider
                .state('my', {
                    url: '/my',
                    // 该方式可以显示多个页面
                    views: {

                        '@': {
                            templateUrl: 'view/my.html'
                        },
                        'content': {
                            template: '欢迎来到后盾人'
                        }
                    }
                })
                //如果视图里面包含视图可以使用@指示上一级
                .state('my.video', {
                    url: '/video',
                    
                    views: {
                        //父级找到son的ui-view 就会对应显示
                        'son@my': {
                            templateUrl: 'view/video.html'  //视频列表
                        },
                        'list@my': {
                            templateUrl: 'view/list.html'  //视频列表
                        },
                        //当前ui-view没有content占位符号 顶级去找
                        'content@': {
                            template: ''
                        }
                    }
                })
        }]);
    </script>
</body>

</html>